<template>
  <!-- 逃生区域实时信息 -->
  <div class="left-top-box">
    <group-card title="逃生区域实时信息">
      <!-- <div class="escapeAudience">实时逃生观众</div> -->
      <div class="left-top-box-inner">
        <!-- 图表区域 -->
        <div class="charts-box">
          <div class="my-chart" ref="myChartRef"></div>

          <div class="center-num">
             <span class="person-num">{{ echartsData.total }}</span>
             <span>实时观众人数</span>
          </div>
        </div>

        <div class="chart-tooltip">
          <div class="chart-tooltip-item">
            <div class="item" v-for="item,i in echartsData.record" :key="i"> {{ item.name }} <span class="item-person" :style="`color: ${colors[i]};`">{{ item.count }}</span></div>
            <!-- <div class="item">A区 <span class="item-person">59</span></div>
            <div class="item">B区 <span class="item-person">29</span></div>
            <div class="item">C区 <span class="item-person">22</span></div>
            <div class="item">D区 <span class="item-person">96</span></div> -->
          </div>
        </div>
      </div>

      <!-- 疏散建议： -->
      <div class="recommendation">
        <div class="recommendation-title">疏散建议：</div>
        <ul class="recommendation-info">
          <li>增加指示标志以引导人群。</li>
          <li>调动额外的安保人员到拥挤区域。</li>
          <li>通过广播系统发布疏散指引。</li>
          <li>必要时，开启额外的紧急出口。</li>
        </ul>
      </div>
    </group-card>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
const props = defineProps({
  echartsData: {
    type: Object,
    default: () =>  ({
      total: 0,
      record: [],
    }),
  },
});


const myChartRef = ref(null);
// data
const state = reactive({
  // echarts 配置
  chart: null,
  echartsOptions: {
    title: {
      text: "•  实时逃生观众",
      left: "10",
      top: "20",
      textStyle: {
        color: "#FFFFFF",
      },
    },
    name: "456456",
    tooltip: {
      trigger: "item",
    },

    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",
        radius: ["32%", "37%"],
        center: ["34%", "50%"],
        padAngle: 1,
        label: {
          show: true,
          show: false
        },
        labelLine: {
          show: false,
        },
        data: [],
        emphasis: {
          scale: false,
          scaleSize: 30,
          itemStyle: {
            shadowBlur: 0,
            shadowOffsetX: 0,
          },
        },
      },
      {
        type: "pie",
        radius: ["41%", "48%"],
        center: ["34%", "50%"],
        padAngle: 1,
        label: {
          show: false,
        },
        data: [],
      },
    ],
    graphic: [
      {
        type: "circle",
        shape: {
          r: 78,
        },
        style: {
          fill: "transparent",
          stroke: "#38383820",
          lineWidth: 2,
          lineDash: "solid",
        },
        left: "6.5%",
        top: "center",
        bounding: "all",
        z: 0,
      },
    ],
  },
});
const { chart, echartsOptions } = toRefs(state);

watch(
  () => props.countData,
  () => {
    updateChart();
  }
);
const colors = ['#E28AEE', '#AFACFF', '#4BA5FF', '#68D0B7'];
const updateData = () => {
  const list = props?.echartsData?.record || [];
  state.echartsOptions.series.forEach((item) => {
    item.data = list.map((row, i) => {
      row.value = row.count;
      row.itemStyle = {
        color: colors[i]
      }
      return row
    });
  });
};
//methods
// 初始化图表
const initEcharts = () => {
  updateData();
  chart.value = shallowRef(echarts.init(myChartRef.value));
  const initOptions = echartsOptions.value;
  chart.value.setOption(initOptions);
};
// 修改图表
const updateChart = () => {
  updateData();
  const updateOptions = echartsOptions.value;
  chart.value.setOption(updateOptions);
};

// 屏幕适配
const screenAdaperPh = () => {
  chart.value.setOption(echartsOptions.value);
  nextTick(() => {
    chart.value.resize();
  });
};
onMounted(() => {
  initEcharts();
  window.addEventListener("resize", screenAdaperPh);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", screenAdaperPh);
});

defineExpose({
  updateChart,
});
</script>

<style lang="scss" scoped>
.left-top-box {
  height: 500px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  // 实时逃生观众
  .escapeAudience {
    margin: 18px 0 0 28px;
    font-size: 16px;
  }
  .left-top-box-inner {
    display: flex;
    flex: 1;
    // flex-direction: column;
    padding: 15px 20px;
    .charts-box {
      position: relative;
      display: flex;
      flex: 1;

      flex-direction: column;
      .my-chart {
        flex: 1;
        // height: 188px;
      }
      .center-num {
        position: absolute;
        left: 34%;
        top: 50%;
        transform: translate(-50%, -50%) scale(.8);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .person-num {
          font-size: 24px;
        }
      }
    }
    .charts-btn-list {
      height: 44px;
      padding: 10px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      overflow-x: auto;
      .charts-btn {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.15);
      }
      .charts-btn + .charts-btn {
        margin-left: 25px;
      }
    }
    .charts-info {
      font-size: 14px;
      height: 30px;
      margin-top: 7px;
      background: linear-gradient(
        90deg,
        #ccaddc5e 0%,
        rgba(109, 93, 118, 0) 100%
      );
      display: flex;
      align-items: center;
      &::before {
        content: "";
        display: block;
        width: 4px;
        height: 20px;
        // background-color: rgba(255, 97, 97, 1);
        margin-right: 10px;
      }
    }
    .chart-tooltip {
      .chart-tooltip-item {
        font-size: 14px;
        width: 110px;
        margin-top: 60px;
        margin-right: 30px;
        // position: relative;

        .item {
          border-bottom: 8px solid;
          border-image: linear-gradient(to top, rgba(255,255,255,0.15), rgba(255,255,255,0) ) 1;
          // background: linear-gradient( 360deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
          margin-top: 13px;
          text-align: center;
          position: relative;

          &::before {
            content: "";
            display: block;
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #ffffff;
            right: 88px;
            top: 38%;
          }
        }

        .item-person {
          margin-left: 4px;
          font-size: 18px;
          color: #e28aeeff;
        }
      }
    }
  }
  // 建议
  .recommendation {
    margin-top: -80px;
    box-sizing: border-box;
    padding: 20px 17px 20px 22px;
    display: flex;
    position: relative;
    font-size: 14px;

    .recommendation-title {
      width: 91px;
      height: 26px;
      line-height: 26px;
      background: rgba(204,173,220,0.15);
      padding-left: 12px;
      color: #ffffff;
      position: relative;
      &::before {
        content: "";
        width: 4px;
        height: 20px;
        background-color: #ff6161ff;
        position: absolute;
        top: 2px;
        left: 0;
      }
    }
    .recommendation-info {
      margin-left: 10px;
      padding: 10px 28px;
      width: 335px;
      height: 94px;
      // background: linear-gradient( 180deg, rgba(204,173,220,0.4) 0%, rgba(109,93,118,0.69) 100%);
      background: linear-gradient( 132deg, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.53) 100%);
      li {
        margin-top: 4px;
      }
    }
  }
}
</style>
